
<template>
  <div class="ChoiceEdit">
    <div class="quesEditBox" >
      <el-form>

        <!--        题目题干编辑-->
        <div class="words">
          <span class="titleTip">题目：</span>
          <el-input v-model="item.title" :value="item.title" type="textarea" :autosize="{ minRows: 1}"
                    @input="ccccc"
          ></el-input>
        </div>

        <!--        题目备注编辑-->
        <div class="words">
          <span class="titleTip">题目备注：</span>
          <el-input v-model="item.remark" :value="item.remark" type="textarea" :autosize="{ minRows: 1}"
                    @input="ccccc"
          ></el-input>
        </div>

        <!--        是否必答选项-->
        <div class="optional" >
          <el-checkbox v-model="item.optional" @input="ccccc">是否必答</el-checkbox>
        </div>

        <!--        选项编辑-->
        <div class="OP" v-if="item.type==='S'||item.type==='M'">

          <draggable v-model="item.option"
                     :sort="true"
                     :group="{name:'OPGrp',pull:false,put:false}"
                     chosenClass="OpChosen"
                     animation="500"
                     force-fallback="true"
                     handle=".moveBall"
                     @sort="ccccc"
          >
            <!--eslint-disable-next-line vue/require-v-for-key -->
            <div class="OPwords" v-for="(option,opindex) in item.option">
              <span class="titleTip moveBall">选项{{opindex+1}}：</span>
              <el-input v-model="option.description" @input="ccccc"
                        type="textarea" :autosize="{ minRows: 1}"
                        class="optionWord"
              ></el-input>
              <el-button @click="DelThisOption(option,opindex)" circle  icon="el-icon-delete" type="text" style="color:red;" ></el-button>
            </div>
            <el-button slot="footer" @click="AddAnOption" plain  size="mini" style="margin:0 auto">新建选项</el-button>
          </draggable>
        </div>

        <div class="limit">
            <el-checkbox v-model="item.is_limit" @input="inputn" @change="changelimit">是否限制报名额度</el-checkbox>
            <div v-show="item.is_limit">
               <!--eslint-disable-next-line vue/require-v-for-key -->
               <div class="OPwords" v-for="(option,opindex) in item.option">
              <span class="titleTip moveBall">选项{{opindex+1}}：</span>    
              <el-input v-model="option.description" @input="ccccc"
                        type="textarea" :autosize="{ minRows: 1}"
                        class="optionWord"
              ></el-input>
              &nbsp;&nbsp;
              <span  class="titleTip moveBall " style="margin-top:4px;margin-right:-20px;">数量</span>
              <el-input  :autosize="{ minRows: 1}" v-model="option.limit_count" style="width:100px;margin-right:50px;" @input="fresh" @change="changelimitnumber(item.id,option.id,option.limit_count)"></el-input>
            </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import {questionCreateOption,questionAddLimitcount, questionDeleteOption} from "../../api";

export default {
  name:'VChoiceEdit',
  components:{draggable
  },
  data(){return{
    checked:"",
    limit:0
  }},
  mounted(){
    this.checked=this.item.is_limit
  },
  props:{
    item:Object,
  },
  methods:{
    changelimitnumber(a,b,c){
      const result=questionAddLimitcount(a,b,c)
      console.log(a,b,c)
      console.log(result)
    },
    ccccc:function(){
      this.$forceUpdate();
      this.$emit('hehe');
    },
    fresh:function(){
      this.$forceUpdate();
    },
    changelimit(){

    },
    DelThisOption:function (op,pos){
      questionDeleteOption(this.$store.state.uid,this.item.id,op.id).then(res=>{
        console.log(res);
        this.item.option.splice(pos,1);
        this.$forceUpdate();
        this.$emit('hehe');
      })
    },
    AddAnOption:function (){
      var newOp=Object.create(null);
      newOp={...newOp};
      newOp.description='我是新增的选项';
      questionCreateOption(this.$store.state.uid,this.item.id,this.item.option.length,'我是新增的选项','').then(res=>{
        console.log(res);
        newOp.id=res.option_id;
        this.item.option.push(newOp);
        this.$forceUpdate();
        this.$emit('hehe');
      })
    },
  }
}
</script>

<style scoped>
.quesEditBox{
  text-align: left;
  padding: 30px 5px 30px 5px;
}
.words{
  font-weight:bold;
  margin-top:5px;
  margin-bottom: 15px;
  display: flex;
}
.divwords{
  font-weight:bold;
  margin-top:5px;
  margin-bottom: 15px;
}
.OP{
  padding-top:15px;
  padding-bottom: 15px;
}
.OPwords{
  font-weight:bold;
  margin-bottom: 10px;
  display: flex;
}

.moveBall{
  cursor: grab;
}

.titleTip{
  font-size: 14px;
  width: 90px;
  height: 30px;
  line-height: 30px;

}
.el-textarea >>> .el-textarea__inner{
  resize: vertical;
  padding: 5px 15px 0px 5px;
  line-height: 1.5;
  min-height: 30px !important;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  font-family: "微软雅黑 Light";
  color: black;
  background-color: transparent;
  background-image: none;
  border: none;
  border-bottom: 1px solid #DCDFE6;
  border-radius: 0px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.OpChosen{
  opacity: 0.2;
}
</style>